<template>
  <a
    href="/collections"
    class="flex items-center hover:text-[#009933]"
    :class="active ? 'text-[#009933]' : ''"
  >
    <svg width="18" height="18" viewBox="0 0 30 30" :fill="active ? '#0066ff' : 'none'" xmlns="http://www.w3.org/2000/svg">
      <path d="M1.66663 5.93329C1.66663 4.43982 1.66663 3.69308 1.95728 3.12265C2.21294 2.62089 2.62089 2.21294 3.12265 1.95728C3.69308 1.66663 4.43982 1.66663 5.93329 1.66663H8.06662C9.5601 1.66663 10.3068 1.66663 10.8773 1.95728C11.379 2.21294 11.787 2.62089 12.0426 3.12265C12.3333 3.69308 12.3333 4.43982 12.3333 5.93329V24.0666C12.3333 25.5601 12.3333 26.3068 12.0426 26.8773C11.787 27.379 11.379 27.787 10.8773 28.0426C10.3068 28.3333 9.5601 28.3333 8.06663 28.3333H5.9333C4.43982 28.3333 3.69308 28.3333 3.12265 28.0426C2.62089 27.787 2.21294 27.379 1.95728 26.8773C1.66663 26.3068 1.66663 25.5601 1.66663 24.0666V5.93329Z" stroke="#2F384C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M17.6666 5.9333C17.6666 4.43982 17.6666 3.69308 17.9573 3.12265C18.2129 2.62089 18.6209 2.21294 19.1227 1.95728C19.6931 1.66663 20.4398 1.66663 21.9333 1.66663H24.0666C25.5601 1.66663 26.3068 1.66663 26.8773 1.95728C27.379 2.21294 27.787 2.62089 28.0426 3.12265C28.3333 3.69308 28.3333 4.43982 28.3333 5.93329V8.06662C28.3333 9.5601 28.3333 10.3068 28.0426 10.8773C27.787 11.379 27.379 11.787 26.8773 12.0426C26.3068 12.3333 25.5601 12.3333 24.0666 12.3333H21.9333C20.4398 12.3333 19.6931 12.3333 19.1227 12.0426C18.6209 11.787 18.2129 11.379 17.9573 10.8773C17.6666 10.3068 17.6666 9.5601 17.6666 8.06663V5.9333Z" stroke="#2F384C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M17.6666 21.9333C17.6666 20.4398 17.6666 19.6931 17.9573 19.1227C18.2129 18.6209 18.6209 18.2129 19.1227 17.9573C19.6931 17.6666 20.4398 17.6666 21.9333 17.6666H24.0666C25.5601 17.6666 26.3068 17.6666 26.8773 17.9573C27.379 18.2129 27.787 18.6209 28.0426 19.1227C28.3333 19.6931 28.3333 20.4398 28.3333 21.9333V24.0666C28.3333 25.5601 28.3333 26.3068 28.0426 26.8773C27.787 27.379 27.379 27.787 26.8773 28.0426C26.3068 28.3333 25.5601 28.3333 24.0666 28.3333H21.9333C20.4398 28.3333 19.6931 28.3333 19.1227 28.0426C18.6209 27.787 18.2129 27.379 17.9573 26.8773C17.6666 26.3068 17.6666 25.5601 17.6666 24.0666V21.9333Z" stroke="#2F384C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
    <span class="ml-[8px]"> {{ $t('collections.collection')}} </span>
  </a>
</template>

<script setup>
  import { ref, inject, onBeforeMount } from 'vue'
  const active = ref(false)

  onBeforeMount(() => {
    if (window.location.pathname.match(/\/collections/)) {
      active.value = true
    }
  })
</script>
